<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>任务四：定位和居中问题</title>
    <link href="//cdn.bootcss.com/fullPage.js/2.7.8/jquery.fullPage.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        background-color: #ecf0f1;
      }
      section {
        text-align: center;
        padding: 20px;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
      section a {
        font-size: 30px;
        font-weight: bolder;
        color: black;
        text-decoration: none;
      }
      section a:hover {
        text-decoration: underline;
      }
      section iframe {
        width: 100%;
        flex: 1;
        margin: 20px 0;
        box-shadow: 1px 1px 4px #000;
        border-radius: 5px;
        background-color: white;
      }
      #menu {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 100;
        list-style-type: none;
      }
      #menu li {
        display: inline-block;
        box-shadow: 1px 1px 1px black;
        border-radius: 10px;
        background-color: white;
        margin: 0 3px;
      }
      #menu li.active {
        box-shadow: 1px 1px 3px black, inset .5px .5px 14px #9BBBCA;
      }
      #menu li a {
        display: inline-block;
        text-decoration: none;
        padding: 8px;
        color: black;
      }
    </style>
  </head>
  <body>
    <ul id="menu" >
      <li v-for="name in list" :data-menuanchor="name" class="active">
        <a :href="'#' + name">{{name}}</a>
      </li>
    </ul>
    <div id="fullpage">
      <div class="section" v-for="name in list">
        <section>
          <a :href="name + '.html'" target="_blank" v-text="name.toUpperCase()"></a>
          <iframe :src="name + '.html'" frameborder="0"></iframe>
        </section>
      </div>
    </div>
    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js" type="text/javascript"></script>
    <script src="//cdn.bootcss.com/fullPage.js/2.7.8/jquery.fullPage.min.js" type="text/javascript"></script>
    <script src="//cdn.bootcss.com/vue/1.0.17/vue.min.js"></script>
    <script type="text/javascript">
      new Vue({
        el: document.getElementsByTagName('body')[0],
        data: {
          list: [
            'position',
            'flex',
          ],
        },
        ready: function() {
          $('#fullpage').fullpage({
            menu: '#menu',
            anchors: this.list,
          })
        },
      })
    </script>
  </body>
</html>
